<template>
    <div 
    v-for="value in dataSource"
    :key="value.cid"
    @click='handleSelect(value)'
    :class="{ 'window':true,'active':value.cid === selected}"
    v-show='value.isShow'
    @contextmenu.stop="">
        <header
        v-windowDrag 
        class="w-header"
        style="height: 30px;"
        :data-flag="1"
        @dblclick='handleZoom(value)'>
            <div class="full-w full-h flex-between above-box">
                <div style="flex-basis: 85%;display: flex; justify-content: flex-start;align-items: center;">

                    <div class="left-icon">
                        <img :src="value.icon" draggable="false">
                    </div>

                    <div style="margin-left: 10px;font-size: 17px;">
                        <div>
                            {{value.name}}
                        </div>
                    </div>

                </div>
            
                <div style="flex-basis: 15%; display: flex; justify-content: flex-end;">
                    <div class="right-panel" style="flex-basis: 5%; min-width: 110px;">
                        <el-icon @click='hideWindow(value)'><minus /></el-icon>
                        <el-icon @click='handleZoom(value)'><copy-document /></el-icon>
                        <el-icon @click='handleClose(value)'><close /></el-icon>
                    </div>
                </div>
            </div>
        </header>
        <div style="padding: 0px 6px 6px;height: 100%;">
            <div
            class="full-layout-1" 
            style="padding-top: 2px;"
            id="iframeParent"
            v-load="loading">
               <iframe 
                target="_self"
                id="iframe"
                :src="value.link"
                :name='value.name' 
                frameborder='0'
                @load="iframeLoad"
                scrolling='yes'>
                </iframe>
                <div style="height: 100%; width: 100%; display: none; position: absolute;"></div>
            </div> 
        </div>
    </div>
</template>

<script>
import { reactive,toRefs } from 'vue'
export default {
  name: 'CommonWindow',
  components: {},
  props: {
      dataSource:{
        type:Array,
        default:null
      },
      selected:{
        type:String,
        default:''
      },
      loading:{
        type:Boolean,
        default:true
      }
  },
  emits: ['select','zoom','hide','close','load'],
  setup(props,context) {
      let methods = reactive({
          handleSelect(value){
              context.emit('select',value)
          },
          handleZoom(value){
              context.emit('zoom',value)
          },
          hideWindow(value){
              context.emit('hide',value)
          },
          handleClose(value){
              context.emit('close',value)
          },
          iframeLoad(){
            context.emit('load')
          }
      })

      return {
          ...toRefs(methods)
      }
  }
}

</script>
<style lang='scss' scoped>
.window {
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: 5px;
    z-index: 10;
    background-color: $white;
    overflow: hidden;
    box-shadow: 0px 0px 1px 2px #eeeeee;

    .w-header {
        padding: 2px;
        // width: 100%;
        height: 70px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0px -2px 8px 7px #fff;
        margin: 5px;

        .left-icon {
            height: 20px;
            width: 20px;
            min-width: 20px;
        }

        .right-panel {
            margin-left: 10px;
            height: 100%;

            i {
                padding: 5px;
                height: 100%;
                width: 30px;
                margin: 0 3px;
                background-color: transparent;
                border-radius: 3px;
                transition: all .2s;
                cursor: pointer;

                &:hover {
                    background-color: rgba(201, 201, 201, 0.4);
                }
            }
        }

    }
    &:deep(.el-loading-mask) {
        top: 70px;
    }

}



.above-box {
    margin-bottom: 5px;
    justify-content:flex-start;
    height: 33px;
}

.below-box {
    justify-content:flex-start;

    &:deep(.el-input__inner) {
        border-radius: 30px;
    }
}


.full-layout {
    height: calc(100% - 80px);
    position: relative;
}

.full-layout-1 {
    height: calc(100% - 40px);
    position: relative;
}

.active {
    z-index: 2000 !important;
}

#iframe {
    position: absolute;
    height: 100%;
    width: 100%;
}
</style>
